<template>
  <div>
    <goga-header title="选择优惠券">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div>
      <div class="coupon-list" >
        <a class="item" @click="chooseCoupon(index)" v-for="(coupon,index) in getCoupon.list" >
          <div class="left">
            <div class="p-price">¥{{coupon.cMoney}}</div>
            <div class="p-sm">满{{coupon.cCondition}}元减{{coupon.cMoney}}元</div>
          </div>
          <div class="right">
            优惠券号：{{coupon.couponSn}} <br>
            全场通用（个别商品除外<br>
            {{coupon.sDate}}—{{coupon.eDate}}
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
<script lang="babel">
  import {mapGetters} from 'vuex'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  export default {
    components: {
      gogaHeader,
      Icon
    },
    computed: {
      ...mapGetters({
        getCoupon: 'backend/tempOrder/getCoupon'
      })
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      chooseCoupon(index) {
        let coupon =  this.getCoupon.list[index];
        this.$store.dispatch('backend/tempOrder/chooseCoupon', {
          id: coupon.couponSn,
          name: coupon.cName
        });
        this.$store.dispatch('global/toast', '优惠券选择成功');
        this.goBack();
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .coupon-list{
    padding: 0 .316rem;
  .item{
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-top: .4rem;
    border: 1px solid #f0f0f0;
    border-right: 2px dashed #f0f0f0;
  .left{
    flex: 1;
    background-color: #ffb230;
    text-align: center;
    padding:0.5rem .316rem;
    color: #fff;
    border-right: 2px dashed #fff;
  .p-price{
    font-size: 1.8em;
  }
  .p-sm{
    font-size: .9em;
  }
  }
  .right{
    flex: 2;
    padding-left: .316rem;
  }
  }
  }
</style>